<template>
  <!-- :groupDisplayType="'groupRows'" -->
  <BaseAgGrid :columnDefs="columnDefs" :defaultColDef="defaultColDef" :enableCellSpan="true" :rowData="rowData" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { type ColDef, type CellStyle } from 'ag-grid-community'

const BaseAgGrid = defineAsyncComponent(() => import('@/components/BaseAgGrid.vue'))

interface IOlympicData {
  athlete: string
  age: number
  country: string
  year: number
  date: string
  sport: string
  gold: number
  silver: number
  bronze: number
  total: number
}

// const arr = []
// for (let index = 0; index < 100; index++) {
//   arr.push(...json)
// // }
// const rowData = ref<IOlympicData[]>(arr as IOlympicData[])

const rowData = ref<IOlympicData[]>([])

import('./data/olympic-winners.json').then((data) => {
  rowData.value = data.default as IOlympicData[]
})

// Column Definitions: Defines the columns to be displayed.
const columnDefs = ref<ColDef<IOlympicData>[]>([
  { field: 'country', spanRows: true, sort: 'asc' },
  {
    field: 'year',
    spanRows: true,
    sort: 'asc',
    rowGroup: true,
    hide: true,
    valueFormatter: (params) => {
      return `${params.value}年`
    },
    // valueGetter: (params) => {
    //   return `${params.data?.year}年 ${params.data?.country} ${params.data?.sport}`
    // },
  },
  { field: 'sport', spanRows: true, sort: 'asc' },
  { field: 'athlete' },
  {
    field: 'age',
    cellStyle: (params) => {
      // params.data
      // console.log(`output->params`, params)

      if (!params.value) return <CellStyle>{}
      if (params.value > 25)
        return {
          color: 'red',
          backgroundColor: 'blue',
        }
      return {
        color: 'blue',
        backgroundColor: 'red',
      }
    },
  },
  { field: 'athlete', headerName: 'athlete1' },
  { field: 'athlete', headerName: 'athlete2' },
  { field: 'athlete', headerName: 'athlete3' },
  { field: 'athlete', headerName: 'athlete4' },
  { field: 'athlete', headerName: 'athlete5' },
  { field: 'athlete', headerName: 'athlete6' },
  { field: 'athlete', headerName: 'athlete7' },
  { field: 'athlete', headerName: 'athlete8' },
  { field: 'athlete', headerName: 'athlete9' },
  { field: 'athlete', headerName: 'athlete10' },
  { field: 'athlete', headerName: 'athlete11' },
  { field: 'athlete', headerName: 'athlete12' },
  { field: 'athlete', headerName: 'athlete13' },
  { field: 'athlete', headerName: 'athlete14' },
  { field: 'athlete', headerName: 'athlete15' },
  { field: 'athlete', headerName: 'athlete16' },
  { field: 'athlete', headerName: 'athlete17' },
  { field: 'athlete', headerName: 'athlete18' },
  { field: 'athlete', headerName: 'athlete19' },
  { field: 'athlete', headerName: 'athlete20' },
  { field: 'athlete', headerName: 'athlete21' },
  { field: 'athlete', headerName: 'athlete22' },
  { field: 'athlete', headerName: 'athlete23' },
  { field: 'athlete', headerName: 'athlete24' },
  { field: 'athlete', headerName: 'athlete25' },
  { field: 'athlete', headerName: 'athlete26' },
  { field: 'athlete', headerName: 'athlete27' },
  { field: 'athlete', headerName: 'athlete28' },
  { field: 'athlete', headerName: 'athlete29' },
  { field: 'athlete', headerName: 'athlete30' },
  { field: 'athlete', headerName: 'athlete31' },
  { field: 'athlete', headerName: 'athlete32' },
  { field: 'athlete', headerName: 'athlete33' },
  { field: 'athlete', headerName: 'athlete34' },
  { field: 'athlete', headerName: 'athlete35' },
  { field: 'athlete', headerName: 'athlete36' },
  { field: 'athlete', headerName: 'athlete37' },
  { field: 'athlete', headerName: 'athlete38' },
  { field: 'athlete', headerName: 'athlete39' },
  { field: 'athlete', headerName: 'athlete40' },
  { field: 'athlete', headerName: 'athlete41' },
  { field: 'athlete', headerName: 'athlete42' },
  { field: 'athlete', headerName: 'athlete43' },
  { field: 'athlete', headerName: 'athlete44' },
  { field: 'athlete', headerName: 'athlete45' },
  { field: 'athlete', headerName: 'athlete46' },
  { field: 'athlete', headerName: 'athlete47' },
  { field: 'athlete', headerName: 'athlete48' },
  { field: 'athlete', headerName: 'athlete49' },
  { field: 'athlete', headerName: 'athlete50' },
  { field: 'athlete', headerName: 'athlete51' },
  { field: 'athlete', headerName: 'athlete52' },
  { field: 'athlete', headerName: 'athlete53' },
  { field: 'athlete', headerName: 'athlete54' },
  { field: 'athlete', headerName: 'athlete55' },
  { field: 'athlete', headerName: 'athlete56' },
  { field: 'athlete', headerName: 'athlete57' },
  { field: 'athlete', headerName: 'athlete58' },
  { field: 'athlete', headerName: 'athlete59' },
  { field: 'athlete', headerName: 'athlete60' },
  { field: 'athlete', headerName: 'athlete61' },
  { field: 'athlete', headerName: 'athlete62' },
  { field: 'athlete', headerName: 'athlete63' },
  { field: 'athlete', headerName: 'athlete64' },
  { field: 'athlete', headerName: 'athlete65' },
  { field: 'athlete', headerName: 'athlete66' },
  { field: 'athlete', headerName: 'athlete67' },
  { field: 'athlete', headerName: 'athlete68' },
  { field: 'athlete', headerName: 'athlete69' },
  { field: 'athlete', headerName: 'athlete70' },
  { field: 'athlete', headerName: 'athlete71' },
  { field: 'athlete', headerName: 'athlete72' },
  { field: 'athlete', headerName: 'athlete73' },
  { field: 'athlete', headerName: 'athlete74' },
  { field: 'athlete', headerName: 'athlete75' },
  { field: 'athlete', headerName: 'athlete76' },
  { field: 'athlete', headerName: 'athlete77' },
  { field: 'athlete', headerName: 'athlete78' },
  { field: 'athlete', headerName: 'athlete79' },
  { field: 'athlete', headerName: 'athlete80' },
  { field: 'athlete', headerName: 'athlete81' },
  { field: 'athlete', headerName: 'athlete82' },
  { field: 'athlete', headerName: 'athlete83' },
  { field: 'athlete', headerName: 'athlete84' },
  { field: 'athlete', headerName: 'athlete85' },
  { field: 'athlete', headerName: 'athlete86' },
  { field: 'athlete', headerName: 'athlete87' },
  { field: 'athlete', headerName: 'athlete88' },
  { field: 'total' },
])

const defaultColDef = ref<ColDef>({})
</script>

<style scoped></style>
